<template>
  <el-form
    class="certification-form"
    ref="form"
    :model="form"
    :rules="rules"
    label-width="120px"
    size="small"
  >
    <el-form-item label="昵称">
      <div class="text">
        {{ $store.getters['user/accountInfo'].user_name }}
      </div>
    </el-form-item>
    <el-form-item label="认证状态">
      <div class="text" :class="[data.auth_status == 3 ? 'error' : '']">
        {{ data.auth_status_text }}
      </div>
    </el-form-item>
    <!-- <el-form-item label="所属机构" prop="mhm_id">
      <el-row>
        <el-col :span="8">
          <el-select v-model="form.mhm_id" placeholder="请选择">
            <el-option :label="item.title" :value="item.id" v-for="(item, index) in data.school" :key="index"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-form-item> -->
    <el-form-item label="所属行业" prop="category">
      <el-row>
        <el-col :span="8">
          <el-cascader
            v-model="form.category"
            :props="categoryProps"
            :options="data.category"
            :show-all-levels="false"
            collapse-tags
          ></el-cascader>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="身份证号" prop="IDcard">
      <el-row>
        <el-col :span="8">
          <el-input v-model="form.IDcard" placeholder="请输入身份证号"></el-input>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="身份证正面" prop="IDcard_positive">
      <edu-upload :args="argsCard" :value.sync="form.IDcard_positive"></edu-upload>
    </el-form-item>
    <el-form-item label="身份证反面" prop="IDcard_side">
      <edu-upload :args="argsCard" :value.sync="form.IDcard_side"></edu-upload>
    </el-form-item>
    <el-form-item label="教师资格证" prop="certification">
      <edu-upload :args="argsCard" :value.sync="form.certification"></edu-upload>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="checked">我已阅读并同意</el-checkbox>
      <el-link type="primary" :underline="false" @click="handleKeyword('teacherUser')"
        >《{{ getAgreementTitle('teacherUser') }}》</el-link
      >
    </el-form-item>
    <el-divider></el-divider>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import EduUpload from '@/components/EduUpload'
import { mapGetters } from 'vuex'
export default {
  components: {
    EduUpload
  },
  inject: ['reload'],
  props: ['data'],
  data() {
    // 上传文件
    var checkCard = (rule, value, callback) => {
      if (value == 0) {
        callback(new Error('请上传文件'))
      } else {
        callback()
      }
    }
    // 身份证
    var checkIDcard = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入身份证号'))
      } else {
        if (!this.$util.idCard(value)) {
          callback(new Error('身份证号输入错误'))
        } else {
          callback()
        }
      }
    }
    return {
      rules: {
        /* mhm_id: [
          { required: true, message: '请选择所属机构', trigger: 'change' }
        ], */
        category: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个行业',
            trigger: 'change'
          }
        ],
        IDcard: [{ required: true, validator: checkIDcard, trigger: 'blur' }],
        IDcard_positive: [{ required: true, validator: checkCard, trigger: 'blur' }],
        IDcard_side: [{ required: true, validator: checkCard, trigger: 'blur' }],
        certification: [{ required: true, validator: checkCard, trigger: 'blur' }]
      },
      categoryProps: {
        multiple: true,
        value: 'id',
        label: 'title',
        children: 'child'
      },
      checked: true,
      form: {
        // mhm_id: '', // 机构
        category: [], // 分类
        IDcard: '', // 身份证号
        IDcard_positive: 0, // 身份证正面照附件ID
        IDcard_side: 0, // 身份证背面照附件ID
        certification: 0 // 教师资格证附件ID
      },
      argsCard: {
        limit: 1,
        upload_type: 'pictureList',
        placeholder: ''
      }
    }
  },
  computed: {
    ...mapGetters({
      getAgreementTitle: 'projectSetting/getAgreementTitle'
    })
  },
  methods: {
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.checked) {
            this.$api.createTeacherAuth(
              {
                ...this.form
              },
              res => {
                this.$message.success(res.msg, res => {
                  this.reload()
                })
              }
            )
          } else {
            this.$message.warning('阅读并同意' + this.getAgreementTitle('teacherUser'))
          }
        }
      })
    },
    handleKeyword(key) {
      this.$router.push({
        path: '/agreement/' + key
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.certification-form {
  ::v-deep .el-form-item__label {
    font-size: 12px;
  }
  .text {
    font-size: 13px;
    color: $text-color-import;
  }
  .error {
    font-size: 13px;
    color: $text-color-error;
  }
  .el-cascader,
  .el-input,
  .el-select {
    width: 100%;
  }
}
</style>
